<template>
    <div class="flex table-main">
        <div v-for="(item, idx) of data" :key="idx">
            <div class="text-center p-2 font-bold">
                <el-tooltip :content="item.lotteryDrawNum">
                    {{ item.lotteryDrawNum.slice(-2) }}
                </el-tooltip>
            </div>
            <div v-for="i in count_front" :key="i">
                <span :class="getBallClass(i.toString().padStart(2, '0'), item.lotteryDrawResult.split(' '))">
                    {{ i.toString().padStart(2, '0') }}
                </span>
            </div>
            <div v-for="i in count_back" :key="i">
                <span :class="getBallClass(i.toString().padStart(2, '0'), item.lotteryDrawResult.split(' '), false)">
                    {{ i.toString().padStart(2, '0') }}
                </span>
            </div>
        </div>
        <div>
            <div class="text-center p-2 font-bold">
                <el-tooltip content="选号">
                    选
                </el-tooltip>
            </div>
            <div v-for="i in count_front" :key="i" @click="onChooseNum(i.toString().padStart(2, '0'), true)">
                <span :class="chooseNums[0].includes(i.toString().padStart(2, '0')) ? 'ball ball-8' : 'ball'">
                    {{ i.toString().padStart(2, '0') }}
                </span>
            </div>
            <div v-for="i in count_back" :key="i" @click="onChooseNum(i.toString().padStart(2, '0'), false)">
                <span :class="chooseNums[1].includes(i.toString().padStart(2, '0')) ? 'ball ball-8' : 'ball'">
                    {{ i.toString().padStart(2, '0') }}
                </span>
            </div>
        </div>
        <div>
            <div class="text-center p-2 font-bold">
                <el-tooltip content="号数统计/Column Statistics">
                    S
                </el-tooltip>
            </div>
            <div v-for="i in count_front" :key="i" v-html="getStatColumnText(i.toString().padStart(2, '0'))">
            </div>
            <div v-for="i in count_back" :key="i" v-html="getStatColumnText(i.toString().padStart(2, '0'), false)">
            </div>
        </div>
        <div>
            <div class="text-center p-2 font-bold">
                <el-tooltip content="全局统计/Global Statistics">
                    GS
                </el-tooltip>
            </div>
            <div v-for="i in count_front" :key="i" v-html="getStatAllText(i.toString().padStart(2, '0'))">
            </div>
            <div v-for="i in count_back" :key="i" v-html="getStatAllText(i.toString().padStart(2, '0'), false)">
            </div>
        </div>
    </div>
    <div class="line-canvas"></div>
</template>

<script setup>
import { ref, watch } from 'vue';
import { createLineCanvas } from '@/utils/LineLib';
import DltDataModel from '@/model/DltDataModel';
import { useDltChartStateStore } from '@/stores/DltChartState';
import { useDltFilterStateStore } from '@/stores/DltFilterState';
import { split_index, count_front, count_back } from '@/config/dlt-config';

let dltDataModel = new DltDataModel();
const dltCS = useDltChartStateStore();
const dltFS = useDltFilterStateStore();

// [{lotteryDrawNum: "25064", lotteryDrawResult: "05 10 18 20 34 01 08", lotteryDrawTime: "2025-06-09"},...]
const data = [...dltDataModel.getDataSource()].reverse();

const statData = dltDataModel.getDrawalStat();
const chooseNums = ref([[], []]);

watch(() => dltFS.getChooseNums(), newVal => {
    chooseNums.value = newVal;
})

watch(() => dltCS.getColumnIndex(), (newVal) => {
    showChooseBalls(true);
});

const getBallClass = (no, result, isFront = true) => {
    let idx = 0;
    if (isFront) {
        idx = result.indexOf(no) + 1;
        return (idx == 0 || idx > split_index) ? 'ball' : `ball ball-${idx}`;
    }
    idx = result.lastIndexOf(no) + 1;
    return (idx == 0 || idx <= split_index) ? 'ball' : `ball ball-${idx}`;
}

const getStatAllText = (no, isFront = true) => {
    let count = 0;
    if (statData.statAll[isFront ? 0 : 1][no]) {
        count = statData.statAll[isFront ? 0 : 1][no];
        if (count > 20) {
            return `<span class="ball border-white color-gray-600 font-500">${count}</span>`;
        } else if (count > 10) {
            return `<span class="ball border-white color-gray-500 font-400">${count}</span>`;
        } else if (count > 5) {
            return `<span class="ball border-white color-gray-400">${count}</span>`;
        } else {
            return `<span class="ball border-white color-gray-300">${count}</span>`;
        }
    }
    return '<span class="ball border-white color-gray-300">-</span>';
}

const getStatColumnText = (no, isFront = true) => {
    let columnIdx = dltCS.getColumnIndex();
    if (columnIdx < 0 || (columnIdx < split_index && !isFront) || (columnIdx >= split_index && isFront)) {
        return '<span class="ball border-white color-gray-300">-</span>';
    }
    let count = 0;
    if (statData.statColumns[columnIdx][no]) {
        count = statData.statColumns[columnIdx][no];
        if (count > 20) {
            return `<span class="ball border-white color-gray-600 font-500">${count}</span>`;
        } else if (count > 10) {
            return `<span class="ball border-white color-gray-500 font-400">${count}</span>`;
        } else if (count > 5) {
            return `<span class="ball border-white color-gray-400">${count}</span>`;
        } else {
            return `<span class="ball border-white color-gray-300">${count}</span>`;
        }
    }
    return '<span class="ball border-white color-gray-300">-</span>';
}

const onChooseNum = (num, isFront = true) => {
    if (chooseNums.value[isFront ? 0 : 1].includes(num)) {
        chooseNums.value[isFront ? 0 : 1].splice(chooseNums.value[isFront ? 0 : 1].indexOf(num), 1);
    } else {
        chooseNums.value[isFront ? 0 : 1].push(num);
    }
    console.log('chooseNo', num, chooseNums.value[isFront ? 0 : 1]);
    dltCS.setPoolNums(chooseNums.value[isFront ? 0 : 1]);
    showChooseBalls();
}

const showChooseBalls = (isPool = false) => {
    // 先删除所有图形
    Array.from(document.querySelector('.line-canvas').children).forEach(el => {
        el.parentNode.removeChild(el);
    })
    if (isPool) {
        // 如果从选号设置调用此方法，则先清空所有点选号码。
        chooseNums.value = [[], []];
    }
    let columnIdx = dltCS.getColumnIndex();
    if (columnIdx < 0) {
        return;
    }
    // 创建走势线
    document.querySelector('.line-canvas').appendChild(createLineCanvas(document.querySelector('.table-main'), 'choose' + columnIdx, dltDataModel.getColumnData(data, columnIdx, true), { heightInc: 50 }));
    // 创建旭日图
    let nums = dltCS.getPoolNums();
    let isFront = columnIdx < split_index;
    let inc = isFront ? 0 : count_front;
    let count = data.length - 1;
    let list = [];
    list.push([count, parseInt(data[count].lotteryDrawResult.split(' ')[columnIdx]) + inc]);
    nums.forEach(num => {
        list.push([count + 1, parseInt(num) + inc]);
        if (isPool) {
            // 如果从选号设置调用此方法，则需要把选号池中的号码加入点选号码中
            chooseNums.value[isFront ? 0 : 1].push(num);
        }
    })
    console.log('showChooseNoLine', list);
    document.querySelector('.line-canvas').appendChild(createLineCanvas(document.querySelector('.table-main'), 'line_' + columnIdx, list, { isSunburst: true, heightInc: 50 }));

}

</script>

<style></style>